<script lang="ts" setup>
import { View, Opportunity } from '@element-plus/icons-vue'
import Delivery from './delivery.vue'
import { cmsRequirementSolution } from '@/api'

interface Iinfo {
  id: string
  coverPhoto: string
  requirementName: string
  requirementArea: string
  requirementType: string
  requirementDescribe: string
  technicalRequirement: string
  budgetType: string
  requirementBudget: string
  requirementCompletionTime: string
  unitName: string
  unitAddress: string
  unitNature: string
  contacts: string
  contactNumber: string
  contactDepartment: string
  contactTitle: string
  hits: string
  scheme: string
  province: string
  city: string
  area: string
  specificAddress: string
  isDeliver: number
  unitSize: string
  status: number
  attachmentName: string
}
const info = ref<Iinfo>({
  id: '',
  coverPhoto: '',
  requirementName: '',
  requirementArea: '',
  requirementType: '',
  requirementDescribe: '',
  technicalRequirement: '',
  budgetType: '',
  requirementBudget: '',
  requirementCompletionTime: '',
  unitName: '',
  unitAddress: '',
  unitNature: '',
  contacts: '',
  contactNumber: '',
  contactDepartment: '',
  contactTitle: '',
  hits: '',
  scheme: '',
  province: '',
  city: '',
  area: '',
  specificAddress: '',
  isDeliver: 1,
  unitSize: '',
  status: 2,
  attachmentName: ''
})
const dictStore = useDictStore()

const emit = defineEmits(['refresh'])
const deliveryRef = ref()

const show = ref(false)
const scheme = ref([] as any)
const schemeActive = ref(0)
const stateOpt = computed(() => {
  return (dictStore.getDict as any[])?.filter(
    (item: any) => item.siteCode === 'JLY_REQUIREMENTSTATUS_CODE'
  )
})
const open = (data: Iinfo, type?: string) => {
  info.value = { ...data }
  if (type == 'needs') {
    cmsRequirementSolution({
      cmsRequirementReleaseId: data.id,
      pageNum: 1, //当前页码
      pageSize: 999, //每页显示条数
      total: 0
    }).then(({ data }) => {
      scheme.value = [...data.list]
      show.value = true
    })
  } else {
    show.value = true
  }
}
const close = () => {
  show.value = false
}

// 根据传入时间获取剩余天数
const getLeftDay = () => {
  return {
    type: info.value.status == 3,
    text: stateOpt.value.find((ite: any) => ite.dictionaryCode == info.value.status)?.dictionaryName
  }
}

const deliveryShow = () => {
  deliveryRef.value.open(info.value.id)
}

const refresh = () => {
  close()
  emit('refresh')
}

defineExpose({
  open,
  close
})
</script>
<template>
  <el-drawer class="drawer-wrap info-wrap" v-model="show">
    <template #header>
      <div class="drawer-title">需求详情</div>
    </template>
    <div class="drawer-content">
      <div class="info-box">
        <div class="info-box-img">
          <img :src="info?.coverPhoto || '@/assets/images/center-list-bg.png'" alt="" />
        </div>
        <div class="info-requirement">
          <div class="info-requirement-title">{{ info.requirementName }}</div>
          <div class="info-extra">
            <span class="extra-text">坐标:{{ (info.province || '') + (info.city || '') }}</span>
            <span class="extra-text"
              >领域:{{
                dictStore.getDictItem('JLY_REQUIREMENTNAME_CODE', info.requirementArea)
                  ?.dictionaryName
              }}</span
            >
            <span class="extra-text"
              >预算:<span class="extra-budget">{{
                info.requirementBudget != '面议'
                  ? info.requirementBudget + '万元'
                  : info.requirementBudget
              }}</span></span
            >
          </div>
          <el-tag :type="!getLeftDay().type ? 'info' : 'primary'" class="info-tag">{{
            getLeftDay().text
          }}</el-tag>
          <div class="info-status">
            <div class="info-status-line">
              <el-icon class="status-line-icon"><View /></el-icon>
              <span class="status-line-text">{{ info.hits || 0 }}</span>
            </div>
            <!-- <div class="info-status-line">
              <el-icon class="status-line-icon"><StarFilled /></el-icon>
              <span class="status-line-text">0</span>
            </div> -->
            <div class="info-status-line">
              <el-icon class="status-line-icon"><Opportunity /></el-icon>
              <span class="status-line-text">{{ info.scheme || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
      <el-form class="drawer-form" label-width="82px">
        <div class="title">需求基本信息</div>
        <el-form-item label="需求领域">{{
          dictStore.getDictItem('JLY_REQUIREMENTNAME_CODE', info.requirementArea)?.dictionaryName
        }}</el-form-item>
        <el-form-item label="需求类型">{{
          dictStore.getDictItem('JLY_REQUIREMENTTYPE_CODE', info.requirementType)?.dictionaryName
        }}</el-form-item>
        <el-form-item label="需求描述">{{ info.requirementDescribe }}</el-form-item>
        <el-form-item label="技术要求">{{ info.technicalRequirement }}</el-form-item>
        <el-form-item label="预算类型">{{
          dictStore.getDictItem('JLY_BUDGETTYPE_CODE', info.budgetType)?.dictionaryName
        }}</el-form-item>
        <el-form-item label="需求预期完成截止时间" class="deadline">{{
          info.requirementCompletionTime
        }}</el-form-item>
        <el-form-item label="附件说明">{{ info.attachmentName }}</el-form-item>
        <div class="title">单位基本信息</div>
        <el-form-item label="单位名称">{{ info.unitName }}</el-form-item>
        <el-form-item label="单位地址">{{
          (info.province || '') + (info.city || '') + (info.area || '') + info.specificAddress
        }}</el-form-item>
        <el-form-item label="单位性质">{{
          dictStore.getDictItem('JLY_UNITNATURE_CODE', info.unitNature)?.dictionaryName
        }}</el-form-item>
        <el-form-item label="企业规模">{{
          dictStore.getDictItem('JLY_UNITSIZE_CODE', info.unitSize)?.dictionaryName
        }}</el-form-item>
        <el-form-item label="联系人">{{ info.contacts }}</el-form-item>
        <el-form-item label="联系电话">{{ info.contactNumber }}</el-form-item>
        <el-form-item label="联系人部门">{{ info.contactDepartment }}</el-form-item>
        <el-form-item label="联系人职务">{{ info.contactTitle }}</el-form-item>
      </el-form>

      <el-tabs v-model="schemeActive" v-if="scheme.length">
        <el-tab-pane
          v-for="(item, index) in scheme"
          :key="index"
          :label="`方案${index + 1}`"
          :name="index"
        >
          <el-form class="drawer-form" label-width="82px" style="padding-left: 10px">
            <div class="title" style="margin-top: 20px">方案信息</div>
            <div class="scheme-form-item">
              <el-form-item label="方案简介">{{ item.schemeIntroduction }}</el-form-item>
              <el-form-item label="附件说明">{{ item.attachmentName }}</el-form-item>
            </div>
            <div class="title">单位基本信息</div>
            <div class="scheme-form-item">
              <el-form-item label="单位名称">{{ item.unitName }}</el-form-item>
              <el-form-item label="单位地址">{{
                (item.province || '') + (item.city || '') + (item.area || '') + item.specificAddress
              }}</el-form-item>
              <el-form-item label="单位性质">{{
                dictStore.getDictItem('JLY_UNITNATURE_CODE', item.unitNature)?.dictionaryName
              }}</el-form-item>
              <el-form-item label="企业规模">{{
                dictStore.getDictItem('JLY_UNITSIZE_CODE', item.unitSize)?.dictionaryName
              }}</el-form-item>
              <el-form-item label="联系人">{{ item.contacts }}</el-form-item>
              <el-form-item label="联系电话">{{ item.contactNumber }}</el-form-item>
              <el-form-item label="联系人部门">{{ item.contactDepartment }}</el-form-item>
              <el-form-item label="联系人职务">{{ item.contactTitle }}</el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <el-button
        class="drawer-footer-btn"
        type="primary"
        @click="deliveryShow"
        v-if="(info.status == 2 || info.status == 3) && !info.isDeliver"
        >投递方案</el-button
      >
    </template>
  </el-drawer>
  <Delivery ref="deliveryRef" @refresh="refresh" />
</template>
<style lang="scss">
.info-wrap {
  width: 1200px !important;
}
</style>
<style lang="scss">
.drawer-wrap {
  .el-drawer__header {
    padding: 0 34px;
    line-height: 40px;
    margin: 0;
    border-bottom: 1px solid #e9ebed;
    .drawer-title {
      font-size: 16px;
      color: #303133;
    }
  }
  .el-drawer__body {
    padding: 24px 34px;
    .drawer-content {
      .title {
        font-size: 16px;
        color: #303133;
        line-height: 22px;
        margin-bottom: 24px;
      }
      .drawer-form {
        .el-form-item {
          margin-bottom: 24px;
        }
        .el-form-item__label {
          justify-content: flex-start;
          margin-right: 22px;
        }
        .el-radio {
          margin-right: 16px;
        }
        .deadline {
          .el-form-item__label {
            line-height: 22px;
            height: auto;
          }
        }
        .drawer-item-width {
          width: 392px;
        }
        .drawer-item-budget {
          width: 333px;
          margin-right: 8px;
        }
        .budget {
          font-size: 14px;
          color: #000;
          line-height: 32px;
          width: 50px;
          text-align: center;
        }
        .drawer-item-requirementAreas {
          width: 485px;
        }
        .drawer-item-unit {
          width: 124px;
          margin-right: 8px;
        }
        .drawer-item-address {
          width: 260px;
        }
        .drawer-item-code {
          width: 268px;
          margin-right: 8px;
        }
        .code {
          width: 116px;
          height: 32px;
          background: #e9ebed;
          border-radius: 2px 2px 2px 2px;
          border: 1px solid #dcdfe6;
          padding: 0 13px;
          color: #a8abb2;
          line-height: 32px;
        }
        .upload-box {
          display: flex;
          align-items: flex-end;
          .upload {
            margin-right: 8px;
            .upload-customize {
              text-align: center;
              color: #909399;
              .text {
                line-height: 20px;
                font-size: 12px;
              }
            }
            // .el-upload--picture-card {
            //   width: 82px;
            //   height: 82px;
            // }
          }
        }

        .msg {
          font-size: 14px;
          color: #606266;
          line-height: 22px;
        }
      }
    }
  }
  .el-drawer__footer {
    padding: 16px 0;
    text-align: center;
    border-top: 1px solid #e9ebed;
    .drawer-footer-btn {
      width: 160px;
      height: 32px;
      border-radius: 0;
      &.el-button--primary {
        --el-button-bg-color: #1551e9;
        --el-button-hover-bg-color: #1551e9;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.info-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  .info-box-img {
    width: 200px;
    height: 150px;
    background: #0f192b;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .info-requirement {
    flex: 1;
    .info-requirement-title {
      font-size: 18px;
      line-height: 25px;
      margin-bottom: 16px;
    }
    .info-extra {
      display: flex;
      // justify-content: space-betwee;
      align-items: center;
      margin-bottom: 16px;
      gap: 34px;
      .extra-text {
        line-height: 22px;
        font-size: 14px;
        color: #595b5e;
        .extra-budget {
          color: #ff7700;
        }
      }
    }
    .info-tag {
      margin-bottom: 16px;
      font-size: 14px;
      height: 32px;
      &.el-tag--primary {
        color: #1d5ede;
        background: rgba(29, 94, 222, 0.2);
      }
    }

    .info-status {
      display: flex;
      align-items: center;

      gap: 24px;
      .info-status-line {
        display: flex;
        align-items: center;
        gap: 5px;
        .status-line-icon {
          font-size: 18px;
          color: #e9ebed;
        }
        .status-line-text {
          line-height: 22px;
          font-size: 14px;
          color: #595b5e;
        }
      }
    }
  }
}
.scheme-form-item {
  padding-left: 15px;
}
</style>
